<template lang="html">
  <div class="content-container">
    <div class="content-condition filter searchBox" id="filterId">

      <div class="filterBtn">
        <el-button type='primary' @click="searchFun" :icon="Search">搜索</el-button>
        <el-button type="danger" @click="resetSearchData" :icon="RefreshRight">重置</el-button>
      </div>
      <el-input v-model="searchData.searchText" style="width: 330px" class="input-with-select"
        placeholder="请输入任务名称"></el-input>
    </div>


    <!--内容按钮-->
    <el-row class="special content-condition buttonBox" id="buttonId">
      <el-col :span="24" ref="limitBtnWidth">
        <el-space id="actualBtnWidth" class="actualBtnWidth">
          <el-button type="primary" @click="addFun" :icon="Plus">新增</el-button>
          <el-button type="success" @click="editFun" :icon="Edit">编辑</el-button>
          <el-button type="danger" @click="deleteFun" :icon="Delete">删除</el-button>
        </el-space>
      </el-col>
    </el-row>

    <!--表格-->
    <div class="table content-condition">
      <common-table :isShowLoading="tableData.poolIsShowLoading" :tableId="tableData.tableId"
        :columns="tableData.columns" emptyText="没有找到数据" :data="tableData.datas" :tableType="tableData.tableType"
        :pager="tableData.pager" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"
        @handleSelectionChange="handleSelectionChange" ref="table">
        <template v-slot:table_checkbox>
          <el-table-column type="selection" align="center" width="55" fixed="left"></el-table-column>
        </template>
      </common-table>
    </div>
  </div>
  <Detail ref="settingDetailDialog"></Detail>
</template>
<script setup lang="js">
import { provide, ref } from 'vue';
import { Edit, Delete, Plus, Search, RefreshRight } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import Detail from './components/Detail.vue';
import _ from 'lodash';
import { getTaskCenterSettingPageList } from '@/api/taskSetting';

const settingDetailDialog = ref(null);

const initSearchData = () => {
  return {
    searchText: '',
    pageIndex: 0,
    pageSize: 20,
  };
};

const searchData = ref(initSearchData());

const tableData = ref({
  tableId: 'taskSettingTable',
  tableType: ["table"], //table-表格 dualCard-双卡片 其它-单卡片
  columns: [
    {
      prop: "id",
      label: "配置Key",
      width: "150",
      align: "left",
      sortable: false,
      show: true
    },
    {
      prop: "category",
      label: "类型",
      width: "30",
      align: "center",
      formatter: function (row) {
        return row.categoryDesc;
      },
      sortable: false,
      show: true
    },
    {
      prop: "displayName", //字段名
      label: "任务名称", //字段中文名
      width: "120", //列宽
      align: "left",
      sortable: false,
      show: true
    },
    {
      prop: "commandName", //字段名
      label: "Command名称", //字段中文名
      width: "210", //列宽
      align: "left", //对齐方式(center,left,right)
      sortable: false,
      show: true
    },
    {
      prop: "isAllowRetry",
      label: "是否允许重试",
      width: "60",
      align: "center",
      formatter: function (row) {
        return row.isAllowRetryDesc;
      },
      show: true
    },
    {
      prop: "maxRetryCount",
      label: "重试次数",
      width: "40",
      align: "center",
      sortable: false,
      show: true
    },
    {
      prop: "timeOutSecond",
      label: "超时时长(s)",
      width: "50",
      align: "center",
      sortable: false,
      show: true
    }
  ],
  datas: [],
  pager: {
    //分页栏信息
    pageNo: 1, //第几页
    limit: 20, //每页记录数
    sizes: [10, 20, 50, 200, 500, 1000],
    total: 0, //总记录数
    isShow: true //是否显示
  },
  expandRowKeys: [],
  selectedRows: [],
  poolIsShowLoading: false,
});

// Methods
/**
 * 搜索
 */
function searchFun() {
  // 这里可以添加搜索逻辑
  console.log('搜索条件:', searchData.value);
  tableData.value.poolIsShowLoading = true;
  getDataFun();
}

/**
 * 重置
 */
function resetSearchData() {
  Object.assign(searchData.value, initSearchData());
  searchFun();
}

/**
 * 获取数据
 */
const getDataFun = _.debounce(() => {
  getTaskCenterSettingPageList({
    pageIndex: searchData.value.pageIndex,
    pageSize: searchData.value.pageSize,
    searchText: searchData.value.searchText
  }).then((res) => {
    if (res == null || !res.isSuccess) {
      ElMessage.error(res.message);
      return;
    }
    tableData.value.datas = res.data.data;
    tableData.value.pager = {
      total: res.data.records,
      limit: res.data.pageSize,
      pageNo: res.data.pageIndex + 1
    };
  }).finally(() => {
    tableData.value.poolIsShowLoading = false;
  });
}, 300);

/**
 * 改变页码
 * @param pageNo 当前页码
 */
function handleCurrentChange(pageNo) {
  searchData.value.pageIndex = pageNo;
  searchFun();
}

/**
 * 改变每页记录数
 * @param pageSize 每页记录数
 */
function handleSizeChange(pageSize) {
  searchData.value.pageSize = pageSize;
  searchFun();
}

/**
 * 处理选中行变化
 * @param selection 选中行数据
 */
function handleSelectionChange(selection) {
  tableData.value.selectedRows = selection;
}

/**
 * 添加
 */
function addFun() {
  settingDetailDialog.value.openDialog();
}

/**
 * 编辑
 */
function editFun() {
  if (tableData.value.selectedRows.length !== 1) {
    ElMessage.info('请选择一条记录进行编辑');
    return;
  }
  settingDetailDialog.value.openDialog(tableData.value.selectedRows[0]);
}

provide('taskSettingProvide', {
  onSuccess: searchFun
})
</script>
<style lang="">

</style>
